<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0 auto;
			}
			#box{
				display: flex;
				width: 700px;
				border: 3px dashed gold;
				justify-content: space-around;
			}
			#box>div{
				width: 100px;
				height: 80px;
				background-color: red;
				color: white;
				font-weight: 600;
				font-size: 24px;
				text-align: center;
				line-height: 80px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="day">
				
			</div>
			<div id="hour">
				
			</div>
			<div id="minutes">
				
			</div>
			<div id="seconds">
				
			</div>
			<div id="milliseconds">
				
			</div>
		</div>
		
		<script type="text/javascript">
			var day = document.getElementById("day");
			var hour = document.getElementById("hour");
			var minutes = document.getElementById("minutes");
			var seconds = document.getElementById("seconds");
			var milliseconds = document.getElementById("milliseconds");
			
			var timeOver = new Date("2020-10-23");
			function overTime(){
				var now = new Date();
				var timeLag = timeOver - now;
				//console.log(timeLag);
				if(timeLag <= 0){
					window.clearInterval(timer);
					return;
				}
				
				var ms = (timeLag % 1000);
				var se = parseInt(timeLag / 1000);
				var sec = (se % 60);
				var min = parseInt((se / 60)) % 60;
				var hours = parseInt((se / 3600)) % 24;
				var days = parseInt((se / 86400)) %365;
				console.log(min,hours,days)
				
				day.innerHTML = days + '天';
				hour.innerHTML = hours + '时';
				minutes.innerHTML = min + '分';
				seconds.innerHTML = sec + '秒';
//				milliSeconds.innerHTML = ms + '毫秒';
				
				var res = '';
				if (ms < 10){
					res = '00' + ms;
				} else if (ms >= 10 && ms < 100){
					res = '0' + ms;
				}else {
					res = ms;
				}
				//console.log(res);
				milliseconds.innerHTML = res + '毫秒';
				
				
			}
			
			var timer = setInterval(overTime,10)
		</script>
		
	</body>
</html>
